在使用flex布局的时候，有时得到的结果和预期不相符，于是记录了一下在小程序中width:100%的表现。

正常布局下width:auto的表现 代码展示:

解析：此时子view块的content+margin+padding+border的宽度为父元素的width大小，不会溢出父元素。 正常布局下width:100%的表现

解析：子元素设置为width:100%且设置margin:left 20rpx的情况下溢出父元素。

评论中指出了flex一节中的错误，重新对文章flex相关内容进行了补充。 flex是Flexible Box的缩写，意思是灵活的布局，，使用flex布局可以快速的完成页面布局。flex布局使用相当简单：指定一个元素为flex容器，指定后容器内部的元素就可以使用flex来进行布局。 flex容器相关属性有flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content属性。 flex容器子元素又可称为项目有order、flex-basis、flex-grow、flex-shrink、flex、align-self属性，其中flex-basis，flex-grow,flex-shrink三个属性会影响子元素的大小。 flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值是auto即项目本来的大小。

当flex的主轴方向为水平轴的时候，设置flex-basis：0%后项目的宽度会失效，即使声明了项目宽度也不起作用。

当flex指定主轴方向为竖直轴的时候，flex-basis会影响高度。 flex-grow定义项目的放大比例，默认值为0，即使存在剩余空间也不会放大。 flex-shrink: 定义了项目的缩小比例。默认值为1，即如果空间不足，该项目将缩小。在同一时间，flex-shrink 和 flex-grow 只有一个能起作用。 当容器未设置flex-wrap:wrap的情况，且子元素宽度不充满整个容器此时flex-grow会起作用，如果子项目flex-grow均设置为1，则子项目会平分剩余空间。

当容器未设置flex-wrap:wrap的情况，且子元素宽度充满整个容器此时flex-shrink会起作用，如果子项目flex-shrink均设置为1，则子项目会等比例缩小。

flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值是 0 1 auto，推荐使用flex属性来控制子项目。